<!DOCTYPE html>

<html lang="en">
<head>

    <title>ACE in Action</title>

    <!--导入js库-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
        #editor {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>

</head>

<body>



    <div id="editor">

        自定义提示关键词 ( 输入 my friend ):

        设置提示的语言 MySQL :

        function foo(items) {

        var x = "All this is syntax highlighted";

        return x;

        }</div>




    <script>

        var editor = ace.edit("editor"); //实例化ace
        editor.setTheme("ace/theme/monokai"); //这里是设置代码编辑器的主题，听说ace包含24个主题呢
        // editor.session.setMode("ace/mode/javascript");//这里是设置代码编辑器按哪种语言显示代码高亮，听说ace支持45种语言呢
        editor.session.setMode("ace/mode/sql");

        //启用提示菜单

        ace.require("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/language_tools");

        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            fontSize: 26,
        });


        // var editor = ace.edit("editor");
        // editor.setTheme("ace/theme/twilight");  设置主题
        // 设置值:  editor.setValue("the new text here"); // 或 session.setValue
        // 获取值:  editor.getValue(); // 或 session.getValue



        //自定义补全
        var languageTools = ace.require("ace/ext/language_tools");

        var automatic_completion_word_list = [];

        for (let i = 0; i < 100; i++) {
            let my_oj = new Object();
            my_oj.value = " my friend + " + i;
            automatic_completion_word_list.push(my_oj)
        }

        console.log(automatic_completion_word_list);

        languageTools.addCompleter({
            getCompletions: function (editor, session, pos, prefix, callback) {
                callback(null, automatic_completion_word_list);
            }
        });




    </script>

</body>

</html>